<!-- 监测池 -->
<script setup>
import {ref, defineExpose} from "vue";
import {formatAmount} from "@/utils/format";
import {getStrategy} from "@/api/strategy";

const dialogVisible = ref(false)

const emits = defineEmits(['getProduct'])

// 打开
const open = () => {
 dialogVisible.value = true
 getList()
}

// 关闭
const handleClose = () => {
 dialogVisible.value = false
}

const list = ref([])

// 获取商品列表
const loadProduct = ref(false)
const getList = () => {
 loadProduct.value = true
 Promise.try(() => {
  return getStrategy()
 }).then(res => {
  res.data.forEach(item => {
   item.latest_price = formatAmount(item.latest_price)
  })
  list.value = res.data
  console.log(list.value)
 })
 loadProduct.value = false
}

const doConfirm = () => {

}

// 暴露给父级的方法
defineExpose({
 open
})

const selectId = ref([])

const newList = ref([])

const onChange = (e) => {
 newList.value = e
}
</script>

<template>
 <el-dialog
  v-model="dialogVisible"
  title="监测池"
  width="700"
  :close-on-press-escape="false"
  :close-on-click-modal="false"
  :before-close="handleClose"
 >

  <el-select multiple v-model="selectId" @change="onChange" collapse-tags>
   <el-option v-for="item of list" :key="item.id" :label="item.name" :value="item" />
  </el-select>

  <el-table :data="newList" class="com_table_box">
   <el-table-column prop="slgname" label="商品代号名称" width="180">
    <template #default="{row}">
     {{row.name}}{{row.symbol}}
    </template>
   </el-table-column>

   <el-table-column label="资金比例">
    <!-- TODO:输入所有数据总和不能超过100 -->
    <template #default="scope">
     <el-input v-model="scope.row.rate" placeholder="资金比例">
      <template slot="append">%</template>
     </el-input>
    </template>
   </el-table-column>

   <el-table-column label="操作" width="100px">
    <template #default="{row}">
     <div class="link">
      <el-link type="danger" :underline="false">删除</el-link>
      <el-link type="primary" :underline="false">停止</el-link>
     </div>
    </template>
   </el-table-column>
  </el-table>
  <template #footer>
   <div class="dialog-footer">
    <el-button @click="handleClose">取消</el-button>
    <el-button type="primary" @click="doConfirm">保存</el-button>
   </div>
  </template>
 </el-dialog>
</template>

<style scoped lang="scss">
.link {
 .el-link {
  &:not(:last-child) {
   margin-right: 20px;
  }
 }
}

.el-input {
 width: 200px;
}
</style>